<div class="margin-bottom" data-bind="validationElement: key">
    <label class="control-label">
        Key <small class="text-muted">(Base64 Encoding)</small>
    </label>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Key" autocomplete="off"
               data-bind="textInput: key, enable: canProvideOwnKey">
        <span class="input-group-btn" data-bind="visible: canProvideOwnKey" title="Generate different key">
            <button class="btn" type="button" data-bind="click: generateEncryptionKey">
                <i class="icon-reset"></i>
            </button>
        </span>
    </div>
</div>
<p>QR Code:</p>
<div class="text-center">
    <div id="encryption_qrcode">
    </div>
</div>
<div class="text-center" id="savingKeyData">
    <span class="has-disable-reason" data-bind="attr: { 'data-original-title': disableSavingKeyData() ? 'Validate database name & key !' : '' }">
        <button type="button" class="btn btn-sm btn-primary" data-bind="click: downloadEncryptionKey, disable: disableSavingKeyData">
            <i class="icon-export"></i> <span>Download encryption key</span>
        </button>
    </span>
    <span  class="has-disable-reason" data-bind="attr: { 'data-original-title': disableSavingKeyData() ? 'Validate database name & key !' : '' }">
        <button type="button" class="btn btn-sm btn-info" data-bind="click: copyEncryptionKeyToClipboard, disable: disableSavingKeyData">
            <i class="icon-copy"></i> <span>Copy to clipboard</span>
        </button>
    </span>
    <span class="has-disable-reason" data-bind="attr: { 'data-original-title': disableSavingKeyData() ? 'Validate database name & key !' : '' }">
        <button type="button" class="btn btn-sm" data-bind="click: printEncryptionKey, disable: disableSavingKeyData">
            <i class="icon-print"></i><span>Print encryption key</span>
        </button>
    </span>
</div>
<div class="row margin-bottom margin-bottom-sm">
    <div class="col-sm-12">
        <div class="checkbox" data-bind="validationOptions: { insertMessages: false }">
            <input class="styled" type="checkbox" id="saved_key_confirm" data-bind="checked: keyConfirmation">
            <label for="saved_key_confirm">I have saved the encryption key.</label>
        </div>
        <div data-bind="validationElement: keyConfirmation">
            <div class="help-block" data-bind="validationMessage: keyConfirmation"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="bg-info padding padding-sm small flex-horizontal">
            <div>
                <i class="icon-warning"></i>
            </div>
            <div>
                <span>
                    Save this key in a safe place. <span data-bind="if: !isKeyAvailableAgain()">It will not be available again.</span><br/>
                    If you lose this key you could lose access to your data!
                </span>
            </div>
        </div>
    </div>
</div>
